<template>
    <div class="f-img-swiper">
        <div class="middle-box img-box" ref="middleBox" @mousemove.stop="moveMagnifier" @mouseleave.stop="showMgnifier = false">
            <img v-if="middleImg" :src="middleImg"/>
            <img v-else style="width: 80%;height:auto; margin: 40px auto auto" src="../assets/images/lost.png"/>
            <div class="magnifier" ref="magnifier" v-show="showMgnifier"></div>
        </div>
        <div class="max-box" ref="maxBox" v-show="showMgnifier">
            <img :src="middleImg" ref="maxImg"/>
        </div>
        <el-carousel v-model="nowIndex" dots="none" arrow="always" v-if="goodsSwiper && goodsSwiper.length > 0" class="f-swiper" @on-change="changeSwiper">
            <el-carousel-item v-for="(item,index) in Math.ceil(goodsSwiper.length / 5)" :key="index">
            <ul class="swiper-box">
                <li v-for="(sItem,sIndex) in goodsSwiper" :key="sIndex" :class="sIndex == minImgIndex ? 'img-item img-item-active' : 'img-item img-item-normal'"
                    @mouseover="changeImg(sItem,sIndex)" v-if="sIndex >= (5 * index) && sIndex < (5 * (index + 1))">
                    <img :src="sItem.path">
                </li>
            </ul>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>
<script>
export default {
    name:"swiper",
    props:{
        goodsSwiper:{
            type:Array,
            default:[]
        }
    },
    data(){
        return{
            nowIndex: 0,// 当前轮播下标
            minImgIndex: 0,
            middleImg: this.goodsSwiper[0] ? this.goodsSwiper[0].path : '',
            showMgnifier: false,//是否显示放大镜
        }
    },
    methods:{
        // 切换轮播
        changeSwiper(oldindex,newindex){
            this.minImgIndex = newindex == 0 ? 0 : newindex * 5;
            this.middleImg = this.goodsSwiper[this.minImgIndex].path;
        },
        // 切换图片
        changeImg(sItem,sIndex){
            this.minImgIndex = sIndex;
            this.middleImg = sItem.path;
        },
        // 移动放大镜
        moveMagnifier(event) {
            let sBox = this.$refs.middleBox.getBoundingClientRect();
            let tBox = this.$refs.magnifier.getBoundingClientRect();
            let x = event.clientX;
            let y = event.clientY;
            let top = (y - sBox.top) > tBox.height / 2 ? ((y - sBox.top - tBox.height / 2) > (sBox.height - tBox.height) ? sBox.height - tBox.height : (y - sBox.top - tBox.height / 2)) : 0;
            let left = (x - sBox.left) > tBox.width / 2 ? ((x - sBox.left - tBox.width / 2) > (sBox.width - tBox.width) ? sBox.width - tBox.width : (x - sBox.left - tBox.width / 2)) : 0;
            this.$refs.magnifier.style.top = top + 'px';
            this.$refs.magnifier.style.left = left + 'px';
            this.$refs.maxImg.style.top = -top * 3 + 'px';
            this.$refs.maxImg.style.left = -left * 3 + 'px';
            this.showMgnifier = true;
        },

    },
}
</script>
<style scoped>
.u-swiper{
    margin: 0 auto;
    width: 720px;
}
.u-swiper .swiper-item {
  height: 374px;
}
.u-swiper .swiper-item img {
  height: 374px;
  width: 100%;
}
.db {
  display: block;
}
.dib {
  display: inline-block;
}
.f-img-swiper {
  position: relative;
}
.f-img-swiper .middle-box {
  width: 342px;
  height: 342px;
  border: 1px solid #E4E4E4;
  position: relative;
}
.f-img-swiper .middle-box img{
  width: 100%;
  height: 100%;
}
.f-img-swiper .middle-box .magnifier {
  width: 168px;
  height: 168px;
  position: absolute;
  background-color: #fff;
  opacity: .3;
  border: 1px solid #E4E4E4;
  cursor: move;
}
.f-img-swiper .max-box {
  position: absolute;
  top: 0;
  width: 510px;
  height: 510px;
  left: 342px;
  z-index: 30;
  border: 1px solid #ccc;
  overflow: hidden;
  background-color: #fff;
}
.f-img-swiper .max-box img {
  position: absolute;
  width: 200%;
  height: 200%;
}
.f-img-swiper .f-swiper {
  width: 342px;
  margin-top: 20px;
}
.f-img-swiper .f-swiper >>> .el-carousel__container{
    height: 90px!important;
}
.f-img-swiper .f-swiper .el-carousel__arrow {
  background-color: transparent;
  color: #ccc;
}
.f-img-swiper .f-swiper .el-carousel__arrow {
  top: 50%;
  z-index: 20;
}
.f-img-swiper .f-swiper .el-carousel__item{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}   
.f-img-swiper .f-swiper .el-carousel__arrow.right {
  right: -26px;
}
.f-img-swiper .f-swiper .el-carousel__arrow.left {
  left: -26px;
}
.f-img-swiper .f-swiper .el-icon {
  font-size: 36px;
}
.f-img-swiper >>> .swiper-box {
  height: 63px!important;
  width: 342px;
  position: relative;
  padding-left:0px!important;
}
.f-img-swiper .swiper-box li img{
  width: 100%;
  height: 100%;
}
.f-img-swiper .swiper-box .img-item-active {
  border: 1px solid red;
}
.f-img-swiper .swiper-box .img-item-normal {
  border: 1px solid #D7D7D7;
}
.f-img-swiper .swiper-box > li {
  display: inline-block;
  margin: 0 4px;
  border: 1px solid #D7D7D7;
  width: 60px;
  height: 60px;
}
.f-img-swiper .swiper-box > li img {
  display: block;
}
.f-img-swiper .swiper-box .i-btn {
  position: absolute;
  top: 14px;
}
.f-img-swiper .swiper-box .prev-btn {
  left: -30px;
}
.f-img-swiper .swiper-box .next-btn {
  right: -30px;
}
.f-swiper >>> .el-carousel__indicator--horizontal{
    display: none!important;
}
</style>